<!--投票分布图-->
<style type="text/css">
	.chart-container {
		background: #000000;
		padding: 20px 0;
		color: #fff;
		text-align: center;
		margin-bottom: 30px;
	}
	.chart-container h3 {
		margin-bottom: 10px;
		margin-top: 0;
	}
	.chart {
		width: 1440px;
		/*height: 400px;*/
		
		border-bottom: #F0AD4E solid 1px;
		padding-bottom: 10px;
		border-top: #F0AD4E solid 1px;
		padding-top: 10px;
		margin: 0 auto;
		/*background: #060;*/
	}
	.chart span {
		display: inline-block;
		width: 1px;
		background: #fff;
	}
	.info-container {
		width: 1440px;
		margin: 10px auto;
	}
	.chart-info,
	.driver-info {
		width: 300px;
		text-align: left;
		float: left;
	}
	#index-container {
		width: 1440px;
		margin: 0 auto;
	}
	#index-container li {
		display: inline-block;
		width: 45px;
		text-align: center;
		height: 48px;
		background: #eee;
		margin-right: 1px;
		cursor: pointer;
	}
	#index-container li p{
	    height: 24px;
	    line-height: 24px;
	    margin: 0;
	}
	#index-container .vote-count{
	    font-size: 80%;
	    border-top: #fff solid 1px;
	    box-sizing: border-box;
	}
	#index-container li.active {
		background: #000;
		color: #fff;
	}
</style>

<div id="chart-index" class="clearfix">
	<ul id="index-container">
	</ul>
</div>

<div id="chart-date" class="chart-container clearfix">
	<h3>每日得票分布图(日期：<span id="chart-title-date">{$vote.date}</span>)</h3>
	<div class="chart">
	</div>
	<div class="info-container">
		<ul class="driver-info">
			<li>姓名：<span class="">{$driver.name} </span>
			</li>
			<li>电话：<span class="">{$driver.tel}</span>
			</li>
			<li>服务号：<span class="">{$driver.service_no}</span>
			</li>
			<li>车牌号：<span class="">{$driver.plate_number}</span>
			</li>
		</ul>
		<ul class="chart-info">
			<li>开始时间：<span class="time-start"></span>
			</li>
			<li>结束时间：<span class="time-end"></span>
			</li>
			<li>得票数量：<span class="count"></span>
			</li>
			<li>分钟最高：<span class="minute-max"></span>
			</li>
		</ul>
	</div>
</div>



<script type="text/javascript">
	var vote = {: json_encode($vote)};
	var dayVotes = {:json_encode($dayVotes)};
	var driver = {: json_encode($driver)};
	var year = {$year};
	var month = {$month};
	var days = {$days};
</script>

<script type="text/javascript">
	function padString(str) {
		if ((str + "").length < 2) {
			str = "0" + str;
		}
		return str;
	}

	function formatDate(timestamp) {
		var now = new Date(timestamp);
		var year = now.getFullYear();
		var month = now.getMonth() + 1;
		var date = now.getDate();
		var hour = padString(now.getHours());
		var minute = padString(now.getMinutes());
		var second = padString(now.getSeconds());
		return year + "年" + month + "月" + date + "日" + hour + "时" + minute + "分";
	}

	function getPixel(data, timeStart) {
		var arrPixel = [];
		for (var i = 0, l = data.length; i < l; i++) {
			var timestamp = timeStart + i * 60;

			arrPixel.push("<span style='height:" + data[i] * 10 + "px' title='" + formatDate(timestamp * 1000) + "：" + data[i] + "'></span>");
		}
		return arrPixel.join('');
	}

	function showVoteChart(data) {
		var $container = $("#chart-date");

		if ($.isPlainObject(data)) {
			var arr = [];
			var topIndex = 0;
			var topCount = 0;
			for (var j = 0; j < 1440; j++) {
				arr[j] = 0;
			}
			if (data.lists && data.lists.length != undefined) {
				for (var i = 0, l = data.lists.length; i < l; i++) {
					var v = data.lists[i];
					var index = parseInt((v.t - data.timeStart) / 60);
					arr[index] ++;
					if (arr[index] > topCount) {
						topCount = arr[index];
						topIndex = i;
					}
				}
			}

			$container.find('.chart').html(getPixel(arr, data.timeStart))
			$container.find('.time-start').html(formatDate(data.timeStart * 1000));
			$container.find('.time-end').html(formatDate(data.timeEnd * 1000));
			$container.find('.count').html(data.count);
			$container.find('.minute-max').html(formatDate((data.timeStart + topIndex * 60) * 1000) + ": " + topCount);
		} else if (typeof data == 'string') {
			$container.find('.chart').html("<p>" + data + "</p>");
		}
	}

	function showDateIndex(days) {
		var $container = $("#index-container");
		for (var i = 1; i <= days; i++) {
			var $li = $("<li></li>").html("<p title='日期'>" + i +"</p><p class='vote-count' title='得票'>" + (dayVotes[i]||0) +"</p>").attr("data-index", i);
			i == days && $li.addClass("active");
			$li.appendTo($container);
		}
	}

	$(function() {
		showVoteChart(vote);
		showDateIndex(days);
		$("#index-container li").click(function() {
			$this = $(this);
			$this.siblings().removeClass('active');
			$this.addClass('active');
			var date = year + "-" + month + "-" + padString($this.attr("data-index"));
			$.ajax({
				type: "POST",
				url: "__CONTROLLER__/getDayVote/term_id/{$Think.get.term_id}",
				async: true,
				data: {
					driver_id: driver.id,
					date: date
				},
				beforeSend: function() {
					showVoteChart('正在加载数据……');
					$("#chart-title-date").html(date);
				},
				success: function(res) {
					showVoteChart(res.extra);
				}
			});
		});
	});
</script>